<!--
 * @author guojiteng
 选择模板
 -->
<template>
  <section class="choose-temp">
    <el-form ref="form" :model="form" label-width="120px">
      <el-form-item label="引用模板库模板">
        <el-radio-group v-model="form.isUseTemplate" style="margin-top:10px;">
          <el-radio style="display: inline-block;" label="0">否</el-radio>
          <el-radio style="display: inline-block;" label="1">是</el-radio>
        </el-radio-group>
      </el-form-item>
      <el-form-item v-if="form.isUseTemplate==='1'" label="模板库模板">
        <!--        <p style="color:red;">替换模板后，会覆盖之前选择的模板。</p>-->
        <el-collapse v-model="activeNames" accordion @change="handleChange">
          <el-radio-group v-model="form.templateId">
            <el-collapse-item v-for="(item,i) in list" :key="i" :title="item.templateName" :name="item.id">
              <el-radio :label="item.id"> 引用当前模板
                <div style="margin-top:20px;">
                  <el-table
                    :data="getTableList(item)"
                    style="width: 100%"
                  >
                    <el-table-column
                      prop="pageName"
                      label="页面名称"
                    />
                    <el-table-column
                      prop="pageCode"
                      label="页面标识"
                    />
                    <el-table-column
                      prop="pageRoute"
                      label="页面路由"
                    />
                    <el-table-column
                      label="是否为首页"
                    >
                      <template slot-scope="scope">
                        {{ scope.row.isHomePage?'是':'否' }}
                      </template>
                    </el-table-column>
                    <el-table-column
                      label="样式图"
                    >
                      <template slot-scope="scope">
                        <!--                        <p v-if="scope.row.templateImg===''" style="color:red;margin: 0;padding: 0;">*请上传样式图</p>-->
                        <el-image
                          v-if="scope.row.templateImg"
                          class="upload-img-table"
                          :src="view + scope.row.templateImg"
                          fit="contain"
                          :preview-src-list="[view + scope.row.templateImg]"
                        >
                          <div slot="error" class="image-slot">
                            <i class="el-icon-picture-outline" />
                          </div>
                        </el-image>
                      </template>
                    </el-table-column>
                  </el-table>
                </div>
              </el-radio>
            </el-collapse-item>

          </el-radio-group>
        </el-collapse>

      </el-form-item>
    </el-form>
  </section>
</template>

<script>
import { getTemp, getTempInfo, setTemp } from '../api/index'
export default {
  name: 'ChooseTemp',
  props: {
    id: {
      type: String,
      default: ''
    }
  },
  data() {
    return {
      list: [],
      activeNames: '',
      form: {
        id: '',
        isUseTemplate: '0',
        templateId: ''
      },
      view: '/API-DOCUMENT/document/file/download?id='
    }
  },
  created() {
    this.getTempInfoFun()
    this.getList()
  },
  methods: {
    handleChange(val) {},
    getTableList(data) {
      const pageList = data.templateContent && JSON.parse(data.templateContent) || []
      pageList.forEach(item => {
        if (typeof item.isHomePage === 'string') {
          item.isHomePage = eval(item.isHomePage.toLowerCase())
        }
      })
      return pageList
    },
    getList() {
      return new Promise((resolve, reject) => {
        getTemp({ templateBaseType: 'MBK_ZQPZ', page: 1, pageSize: 10000, status: 'ZT01' })
          .then((res) => {
            this.list = res.data.data.rows || []
          })
          .catch((error) => {
            reject(error)
          })
      })
    },
    setBefore() {
      if (this.form.isUseTemplate === '1' && this.form.templateId === '') {
        this.$message.error('请选择模板')
        return
      }

      this.$confirm('此操作会覆盖之前选择的模板，如已对模板页面进行过编辑，覆盖后原有操作均会失效，请确认是否继续？', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.setTempFun()
      }).catch(() => {

      })
    },
    setTempFun() {
      const loading = this.$loading({
        lock: true,
        text: '请稍后...',
        spinner: 'el-icon-loading',
        background: 'rgba(0, 0, 0, 0.7)'
      })
      return new Promise((resolve, reject) => {
        setTemp(Object.assign(this.form, { id: this.id }))
          .then((res) => {
            loading.close()
            if (res.data.code === '200') {
              this.$message.success('设置成功')
              this.$emit('close')
            }
          })
          .catch((error) => {
            loading.close()
            reject(error)
          })
      })
    },
    getTempInfoFun() {
      const loading = this.$loading({
        lock: true,
        text: '请稍后...',
        spinner: 'el-icon-loading',
        background: 'rgba(0, 0, 0, 0.7)'
      })

      return new Promise((resolve, reject) => {
        getTempInfo({ id: this.id })
          .then((res) => {
            loading.close()
            if (res.data.code === '200' && res.data.data) {
              const data = res.data.data
              for (const key in this.form) {
                if (key === 'isUseTemplate') {
                  this.form[key] = data[key] ? data[key] : '0'
                } else {
                  this.form[key] = data[key] ? data[key] : ''
                }
              }
              if (data.templateId) {
                this.activeNames = data.templateId
              }
            }
          })
          .catch((error) => {
            loading.close()
            reject(error)
          })
      })
    }
  }
}
</script>

<style lang="scss">
.choose-temp{
  height: calc(100vh - 140px);
  overflow-y: auto;
  padding: 20px;
  .el-radio-group{
    display: block;
  }
  .el-radio{
    display: block;
  }
}
</style>
